const c_image = {
    name: "c_image",
    template: `
        <div class="c_image" :class="show ? 'c_image_show' : ''">
            <img src="../images/jiantou.png" class="leftTurn" @click="last">
            <img :src="list[index] || ''" class="mainImage">
            <img src="../images/youjiantou.png" class="rightTurn" @click="next">
            <img src="../images/close.png" class="close" @click="show = false">
        </div>
    `,
    data() {
        return {
            index: 0,
            list: [],
            show: false
        }
    },
    watch: {
        show(ev) {
            document.body.style.overflowY = ev ? "hidden" : "auto";

        },
    },
    methods: {
        next() {
            if (this.index < this.list.length - 1) this.index += 1;
        },
        last() {
            if (this.index > 0) this.index -= 1;
        }
    }
}
Vue.component("c_image", c_image);